<template>
  <div>
    <!-- 头部导航
      插槽: 是往组件里某个占位的位置, 传入我们自己的标签替换进去显示
      使用: 组件标签夹着的中间, 用template包裹要传入的标签
      具名插槽: v-slot:名字, 指定传入到某个插槽名字占位符的地方
      v-slot:名字 可以简写成 #名字
     -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/3c39a26da717e33f76bac40b1b457a8.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" color="#fff" size="0.48rem" @click="$router.push('/search')"/>
      </template>
    </van-nav-bar>
    <!-- 频道导航
      van-tab: 每个标签页导航(点击切换)
        title: 导航上显示文字
        夹着的地方就是将来要显示切换内容的地方

        div要给一个padding-top让出顶部固定定位位置
     -->
    <div class="tabs_content">
      <van-tabs v-model="active" color="#007bff" sticky offset-top="1.22667rem" animated>
        <!-- 每次循环都是独立的article-list(多个) -->
        <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name">
          <article-list :cid="obj.id"></article-list>
        </van-tab>
      </van-tabs>
    <!-- 频道+ -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="show = true"/>
    </div>
    <!-- 频道编辑-弹出层 -->
    <van-popup v-model="show" class="edit_wrap">
      <!-- v-model是vue提供的一个指令(语法糖)本质
        运行时: 代码会被转换成这样
        :value="show"
        @input="val => show = val"
       -->
      <!--
        .sync语法糖: (双向数据绑定)
        运行时: 代码会被转换成这样
        :userChannelList="userChannelList" (父->子)
        @update:userChannelList="val => userChannelList = val"
        -->
      <channel-edit v-model="show" :userChannelList.sync="userChannelList" @changeChannelEV="changeChannelFn"></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { getUsersChannelListAPI } from '@/api'
import ArticleList from './AtricleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'HM-Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0, // 频道导航高亮的索引值
      userChannelList: [], // 用户"已选"频道列表
      show: false // 频道编辑弹出层-出现/隐藏
    }
  },
  created () {
    // 获取-用户已选的频道列表
    this.getUserChannelListFn()
  },
  methods: {
    // 获取-用户已选的频道列表
    async getUserChannelListFn () {
      const res = await getUsersChannelListAPI()
      // console.log(res)
      // this.userChannelList = res.data.data.channels
      const {
        data: {
          data: { channels }
        }
      } = res
      this.userChannelList = channels
    },
    // 改变频道方法
    changeChannelFn (channelObj) {
      // 怎么影响van-tabs默认选中
      // 核心思想: 在userChannelList里找到用户选中频道对象索引, 传递个van-tabs的v-model变量, 影响标签默认选中效果
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.active = index
    }
  }
}
</script>

<style scoped>
.logo {
  width: 100px;
  height: 30px;
}
.tabs_content{
  padding-top: 46px;
}
/* 设置 tabs 容器的样式 */
::v-deep .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

/* 频道弹出层-容器宽度高度 */
.edit_wrap{
  width: 100%;
  height: 100%;
}
</style>
